<template>
	<s-layout title="任务详情">
        <view class="content">
            <view class="content_box">
                <view class="header" > 
                    <view class="header_images" style="float: left;">
                        <image :src="apiUrl + state.model.task?.img"></image>   
                    </view>
                    <view class="header_title" style="margin-left:20rpx;float:left">商家id:{{ state.model.task?.userid }}</view>
                    <view class="header_title" style="float: right;">任务id:{{ state.model.task?.id }}</view>
                </view>
                
                <view class="tag">
                    <view class="tag_rw">{{ state.model.task_type?.title }}</view>
                    <view class="tag_mey">{{ state.model.task?.task_price_platform }}元</view>
                </view>


                <view class="info">
                    <view>{{ state.model.task?.task_title }}</view>
                    <view class="info_box">
                        <view style="display:grid;text-align: center;">
                            <text>0</text>
                            <text class="info_status">已完成</text>
                        </view>
                        <view style="display:grid;text-align: center;">
                            <text>{{ state.model.task?.task_num }}</text>
                            <text class="info_status">总剩余数</text>
                        </view>
                        <view style="display:grid;text-align: center;">
                            <text>1h</text>
                            <text class="info_status">限时交单</text>
                        </view>
                        <view style="display:grid;text-align: center;">
                            <text>24h</text>
                            <text class="info_status">限时审核</text>
                        </view>
                    </view>
                </view>

                <view class="desc_box">
                    <view style="margin-bottom:20rpx">
                        <view class="desc_title">做单说明</view>
                    </view>

                    <view class="descs">
                        1、请先报名再做任务，否则无法获得赏金。
                    </view>
                    <view class="descs">
                        2、举报违法任务私下交易、同类平台，有奖。
                    </view>
                    <view class="descs">
                        3、私下交易有风险，平台不对平台以外的单子负责。
                    </view>
                </view>
                
                <view class="desc_box">
                    <view style="margin-bottom:20rpx">
                        <view class="desc_title">任务说明</view>
                    </view>

                    <view class="descs">
                        {{ state.model.task?.content }}
                    </view>
                </view>


                <!-- <view class="desc_box">
                    <view style="margin-bottom:20rpx">
                        <view class="desc_title">任务步骤</view>
                    </view>

                    <view class="descs">
                        这里是任务的详细步骤说明
                    </view>
                </view> -->

                <view class="btn" @click="submitOrder">
                    <button>领取任务</button>
                </view>
            </view>
        </view>
    </s-layout>
</template>
<script setup>
import { reactive,ref  } from 'vue'
import sheep from '@/sheep';
import { onLoad } from '@dcloudio/uni-app';

const apiUrl = ref(import.meta.env.SHOPRO_BASE_URL)
const id = ref();
const state = reactive({
    model:{}
})
async function getInfo(){
    const res = await sheep.$api.task.getInfo({id:id.value});
    if(res.code == 1){
        state.model =  res.data
    }
    console.log(res)
}

onLoad(async (options) => {
    console.log(options)
    if(options.id){
        id.value = options.id
    }
    getInfo()
})

async function submitOrder(){
    uni.showModal({
		title: '任务提醒',
		content: '确定要领取该任务吗？',
		cancelText: '再想想',
		confirmText: '确定',
		success: async function (res) {
			if (res.confirm) {
				const res = await sheep.$api.task.createReceive({lid:id.value});
				if(res.code == 1){
					sheep.$helper.toast(res.msg);
                    sheep.$router.go('/pages/task/taskorder')
				}
			}
		},
  });
}
</script>
<style>
.content{
    width: 100%;
}
.content_box{
    margin: 0 10rpx;
    padding: 20rpx;
    
}
.header{
    height: 140rpx;
}
.header_images {
    width: 120rpx;
    height: 120rpx;
}
.header_images image{
    width: 100%;
    height: 100%;
    border-radius: 16rpx;
}
.header_title{
    line-height: 140rpx;
}
.tag{
    display: flex;
    justify-content:space-between;

}
.tag_rw{
    padding: 6rpx;
    color: white;
    border-radius: 10rpx;
    font-size: 20rpx;
    background: orange;
}
.tag_mey{
    color: red;
    font-size: 28rpx;
    font-weight:600;
}
.info{
    margin-top: 20rpx;    
}
.info_status{
    color:#A6A6A8;
    font-size: 24rpx;
}
.info_box{
    display: flex;
    justify-content: space-around;
    border: 2px dashed #FE791E;
    padding: 20px 0px;border-radius: 10px;
    margin-top: 20rpx;

}

.desc_box{
    margin-top:40rpx;

}
.desc_title{
    border-left: 2px solid #FE791E;
    padding-left: 20rpx;
    height: 16px;
    line-height: 16px;
    color: black;
    font-weight: 600;
}
.descs{
    font-size: 24rpx;
    height: 50rpx;
}
.btn{
    position: fixed;
    bottom: 30px;
    width: 380px;

}
.btn button{
    background:#FE791E;
    border-radius: 80rpx;
    color: white;
}
</style>